<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <div>
        <a href="http://www.atguigu.com" onclick="return push('/test1') "
          >push test1</a
        >
      </div>
      <div>
        <button onClick="push('/test2')">push test2</button>
      </div>
      <div>
        <button onClick="replace('/test3')">replace test3</button>
      </div>
      <div>
        <button onClick="back()">后退《《</button>
        <button onClick="forward()">前进》》</button>
      </div>
    </div>
    <script
      type="text/javascript"
      src="https://cdn.bootcss.com/history/4.7.2/history.js"
    ></script>
    <script type="text/javascript">
      console.dir(History);
      let history = History.createHashHistory();
      function push(path) {
        history.push(path);
        return false;
      }
      function replace(path) {
        history.replace(path);
      }
      function back() {
        history.goBack();
      }
      function forward() {
        history.goForward();
      }
      history.listen((location) => {
        console.log("请求路由路径变化了", location);
      });
    </script>
  </body>
</html>
